<template>
	
	<el-row>
		<el-col :span="3">
			
			<el-menu class="Fmenu">
				<el-menu-item style="height: 70px;margin-right: 0;">
					<div class="logo">
						<img src="../../public/拼图.png" alt="" />
					</div>
				</el-menu-item>
				<el-menu-item v-for="firstMenu in menuList" :index="firstMenu.menuId+''">
					<router-link v-if="firstMenu.menuPath.slice(1,5)!='hide'" :to="firstMenu.menuPath">{{firstMenu.menuName}}</router-link>
				</el-menu-item>
			</el-menu>
		</el-col>
		<el-col :span="21">
			<router-view></router-view>
		</el-col>
	</el-row>
	
</template>

<script setup>
	 import { ElRow,ElCol,ElMenu,ElMenuItem } from 'element-plus';
	 import { onMounted, ref } from 'vue';
	 import { getAllMenuList } from '@/api'
	 let menuList=ref([])
	onMounted(async ()=>{
		let menuRes=await getAllMenuList({
			roleId:Number(sessionStorage.getItem("roleId"))
		})
		menuList.value=menuRes
	})
	
</script>

<style lang="less">
	*{
		margin:0;
		padding: 0;
	}
	// .el-menu{
	// 	padding:0;
	// }
	
	.el-menu-item {
		padding: 0 !important;
		margin-right: 0 !important;
	}

	.Fmenu{
		height: 100vh;
		background: #282b34;
		position: relative;
		li{
			margin-right: 0px;
		}
		a{
			color: #afb3bd;
			text-decoration:none;
			font-size: 17px;
			width: 90%;
			text-align: center;
			margin: 0 auto;
		}
		a.router-link-active{
			background: #273ce3;
			color: #e1d5f4;
		}
		.logo{
			width: 50px;
			height: 50px;
			background-color: #9B6BF8;
			position: absolute;
			left:70px;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 10px;
			img{
				width: 40px;
				height: 40px;
			}
		}
	}
</style>
